<template>
  <div class="content">
    <headtop></headtop>
    <div class="login-form">
      <div class="login-title">
        <p @click="enter1">刷 卡 登 录</p>
      </div>
      <div class="login-content">
        <img src="../assets/monitor/pic_scan.png" @click="postcode()"/>
        <p>
          使用学校一卡通刷卡即可登录
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import headtop from '@/views_monitor/head.vue'
  import {loginCheck} from '@/api/api'
  export default {
    components: {
      headtop
    },
    data () {
      return {
        checkNum: '',
        intervalid: ''
      }
    },
    created () {
      this.createNum()
      this.intervalid = setInterval(this.postcode, 4000)
    },
    beforeDestroy () {
      clearInterval(this.intervalid)
    },
    methods: {
      createNum () {
        let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
        let maxPos = chars.length
        for (let i = 0; i < 16; i++) {
          this.checkNum += chars.charAt(Math.floor(Math.random() * maxPos))
        }
      },
      enter1 () {
        this.$router.push({path: '/monitor/explain/'})
      },
      postcode () {
        let postData = {
          'checkNum': this.checkNum
        }
        loginCheck(postData).then(res => {
          if (res.status === 200) {
          } else if (res.status === 201) {
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            this.$router.push({path: '/monitor/explain/'})
          } else if (res.status === 202) {
            this.$message({
              type: 'success',
              message: '当前没有实验'
            })
          } else if (res.status === 203) {
            this.$message({
              type: 'error',
              message: '该工位已满，请寻找其他工位'
            })
            this.$router.go(-1)
          } else if (res.status === 204) {
            this.$message({
              type: 'error',
              message: '该卡对应的用户已经在其他工位登录过了'
            })
          }
        }).catch(error => {
//          this.$message({
//            type: 'error',
//            message: '登录失败'
//          })
          console.log('登录记录添加失败', error)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    height: 100%;
    width: 100%;
    background: url('../assets/monitor/bg_blue.png') no-repeat;
    background-size: cover;
    .login-form {
      width: 720px;
      height: 480px;
      border: 1px solid white;
      border-radius: 10px;
      background: #244596;
      opacity: 0.8;
      margin:0 auto;
      margin-top: 70px;
      .login-title {
        height: 80px;
        width: 100%;
        border-radius: 10px 10px 0 0;
        background: #5fff8b;
        text-align: center;
        p {
          font-size: 50px;
        }
      }
      .login-content {
        text-align: center;
        img {
          margin-top: 40px;
        }
        p {
          margin-top: 10px;
          font-size: 20px;
          color: white;
        }
      }
    }
  }
</style>
